<template>
  <div
    class="w-screen min-h-screen flex flex-col items-center gap-[20px] mt-[20px] mb-[40px]"
  >
    <!-- Header Section -->
    <div class="w-[1200px] rounded-2xl px-2 pt-6">
      <div class="w-full">
        <div class="flex items-center gap-4">
          <a-avatar :size="128" :src="avatarUrl" />
          <div>
            <h1 class="text-2xl font-bold">{{ userInfo.nickname }}</h1>
            <p class="text-gray-500">{{ userInfo.accountId }}</p>
            <p class="text-gray-600 font-semibold">
              {{ userInfo.sign || "此人已躺平，拒绝卷王打扰。" }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Content Section -->
    <div class="w-[1200px] flex justify-center gap-[20px] items-start">
      <div class="w-[300px] bg-white rounded-2xl p-6">
        <div class="sticky top-5 w-full space-y-6">
          <!-- 个人信息卡片 -->
          <div class="space-y-4">
            <div class="flex items-center gap-2 text-gray-600">
              <svg
                class="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                />
              </svg>
              <span>{{ position }}</span>
            </div>
            <div class="flex items-center gap-2 text-gray-600">
              <svg
                class="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                />
              </svg>
              <span>{{ address }}</span>
            </div>
            <div class="flex items-center gap-2 text-gray-600">
              <svg
                class="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                />
              </svg>
              <span>已加入 {{ joinDays }} 天</span>
            </div>
          </div>

          <!-- 操作按钮 -->
          <button
            class="w-full bg-green-50 text-green-600 py-2 rounded-lg hover:bg-green-100 transition-colors"
            @click="switchView('edit')"
          >
            编辑个人资料
          </button>

          <!-- 收藏/点赞信息 -->
          <div class="flex flex-col space-y-4">
            <div
              class="w-full p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
              :class="{ 'bg-gray-100': currentView === 'collections' }"
              @click="switchView('collections')"
            >
              <div class="flex items-center gap-3">
                <svg
                  class="w-5 h-5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
                  />
                </svg>
                <div class="flex-1">
                  <div class="flex items-center justify-between">
                    <div class="font-bold text-gray-700">我的收藏</div>
                    <div
                      class="px-2 py-0.5 bg-green-50 rounded text-green-600 font-medium text-sm"
                    >
                      {{ interactionCounts.favourCount }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="w-full p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
              :class="{ 'bg-gray-100': currentView === 'likes' }"
              @click="switchView('likes')"
            >
              <div class="flex items-center gap-3">
                <svg
                  class="w-5 h-5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                  />
                </svg>
                <div class="flex-1">
                  <div class="flex items-center justify-between">
                    <div class="font-bold text-gray-700">我的点赞</div>
                    <div
                      class="px-2 py-0.5 bg-green-50 rounded text-green-600 font-medium text-sm"
                    >
                      {{ interactionCounts.likeCount }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 求职相关 -->
          <div class="space-y-4">
            <!-- <div class="text-gray-600">定制你的理想工作机会</div> -->
            <div
              class="bg-gray-50 p-4 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
            >
              填写求职意向
            </div>
            <div
              class="bg-gray-50 p-4 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
            >
              完善简历信息
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="w-[880px] flex flex-col gap-4">
        <!-- 默认内容 -->
        <div v-if="currentView === 'default'">
          <div class="grid grid-cols-2 gap-4">
            <!-- 第一个卡片：解题进度 -->
            <div class="bg-white rounded-2xl p-6">
              <div class="flex flex-col gap-6">
                <!-- 进度展示区域 -->
                <div class="flex items-center justify-between">
                  <!-- 仪表盘进度 -->
                  <div class="flex flex-col items-center w-[250px]">
                    <a-tooltip>
                      <template #title>
                        <div class="text-center">
                          已完成 {{ totalSolved }}/{{ totalProblems }} 题
                        </div>
                      </template>
                      <a-progress
                        type="dashboard"
                        :percent="progressPercentage"
                        :stroke-color="{
                          '0%': '#add8e6',
                          '100%': '#8a2be2',
                        }"
                        :gap-degree="75"
                        :gap-position="'bottom'"
                        :size="150"
                      />
                    </a-tooltip>
                  </div>

                  <!-- 右侧难度统计卡片 -->
                  <div class="w-[140px] pl-4">
                    <div class="flex flex-col space-y-3">
                      <!-- 简单题统计 -->
                      <div
                        class="flex items-center justify-between p-2 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
                      >
                        <span class="text-sm text-gray-500">简单</span>
                        <span class="text-base font-bold text-green-600">
                          {{ easyProgress.solved }}/{{ easyProgress.total }}
                        </span>
                      </div>

                      <!-- 中等题统计 -->
                      <div
                        class="flex items-center justify-between p-2 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
                      >
                        <span class="text-sm text-gray-500">中等</span>
                        <span class="text-base font-bold text-yellow-600">
                          {{ mediumProgress.solved }}/{{ mediumProgress.total }}
                        </span>
                      </div>

                      <!-- 困难题统计 -->
                      <div
                        class="flex items-center justify-between p-2 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
                      >
                        <span class="text-sm text-gray-500">困难</span>
                        <span class="text-base font-bold text-red-600">
                          {{ hardProgress.solved }}/{{ hardProgress.total }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 第二个卡片：数据统计 -->
            <div class="bg-white rounded-2xl p-4 flex items-center">
              <!-- 添加flex和垂直居中 -->
              <div class="grid grid-cols-2 gap-3 w-full">
                <!-- 添加骨架屏条件渲染 -->
                <template v-if="dataLoading">
                  <div v-for="i in 4" :key="i"
                       class="flex flex-col items-center p-3 bg-gray-50 rounded-lg">
                    <div class="animate-pulse bg-gray-200 h-4 w-16 rounded mb-2"></div>
                    <div class="animate-pulse bg-gray-200 h-6 w-8 rounded"></div>
                  </div>
                </template>
                
                <template v-else>
                  <div class="flex flex-col items-center p-3 bg-gray-50 rounded-lg transition-colors hover:bg-gray-100">
                    <span class="text-gray-500 text-sm">获得点赞</span>
                    <span class="text-lg font-bold text-gray-700">{{ fourData.thumbNum }}</span>
                  </div>
                  <div class="flex flex-col items-center p-3 bg-gray-50 rounded-lg transition-colors hover:bg-gray-100">
                    <span class="text-gray-500 text-sm">获得收藏</span>
                    <span class="text-lg font-bold text-gray-700">{{ fourData.favourNum }}</span>
                  </div>
                  <div class="flex flex-col items-center p-3 bg-gray-50 rounded-lg transition-colors hover:bg-gray-100">
                    <span class="text-gray-500 text-sm">阅读总数</span>
                    <span class="text-lg font-bold text-gray-700">{{ fourData.readNum }}</span>
                  </div>
                  <div class="flex flex-col items-center p-3 bg-gray-50 rounded-lg transition-colors hover:bg-gray-100">
                    <span class="text-gray-500 text-sm">发帖总数</span>
                    <span class="text-lg font-bold text-gray-700">{{ fourData.postNum }}</span>
                  </div>
                </template>
              </div>
            </div>
          </div>

          <!-- 第三行单独区域 -->
          <div class="bg-white rounded-2xl p-6 mt-4">
            <div class="flex flex-col gap-4">
              <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">
                  本年共计提交 {{ yearlySubmitCount }} 次
                </h3>
                <div class="flex items-center gap-3">
                  <a-select
                    v-model:value="selectedYear"
                    class="w-[100px]"
                    :options="yearOptions"
                    @change="handleYearChange"
                  />
                </div>
              </div>
              <ContributionPlot
                class="w-full"
                :contribution-data="completionData"
                :year="selectedYear"
                record-type="problems"
                :loading="contributionLoading"
              />
            </div>
          </div>
          <!-- 第四行单独区域 6 -->
          <div class="bg-white rounded-2xl p-6 mt-4">
            <div class="flex flex-col gap-4">
              <!-- 按钮组 -->
              <div class="flex gap-3">
                <button
                  v-for="tab in tabs"
                  :key="tab.key"
                  class="px-4 py-2 rounded-md transition-all duration-200 font-medium"
                  :class="{
                    'bg-blue-500 text-white shadow-sm hover:bg-blue-600':
                      currentTab === tab.key,
                    'bg-gray-100 text-gray-600 hover:bg-gray-200':
                      currentTab !== tab.key,
                  }"
                  @click="currentTab = tab.key"
                >
                  {{ tab.label }}
                </button>
              </div>

              <!-- 内容区域 -->
              <div class="min-h-[200px] pt-4">
                <!-- 做题记录 -->
                <div v-if="currentTab === 'submissions'" class="space-y-4">
                  <div
                    v-for="record in submissionRecords"
                    :key="record.id"
                    class="flex items-center justify-between p-4 hover:bg-gray-50 rounded-lg transition-colors"
                  >
                    <div class="flex items-center gap-4">
                      <div
                        :class="
                          record.status === 'accepted'
                            ? 'text-green-500'
                            : 'text-red-500'
                        "
                      >
                        {{ record.status === "accepted" ? "通过" : "未通过" }}
                      </div>
                      <div class="text-gray-700">{{ record.problemTitle }}</div>
                      <div
                        :class="{
                          'text-green-600': record.difficulty === 0,
                          'text-yellow-600': record.difficulty === 1,
                          'text-red-600': record.difficulty === 2,
                        }"
                      >
                        {{ record.difficulty === 0 ? '简单' : record.difficulty === 1 ? '中等' : '困难' }}
                      </div>
                    </div>
                    <div class="text-gray-500">{{ record.submitTime }}</div>
                  </div>
                </div>

                <!-- 题解 -->
                <div v-if="currentTab === 'solutions'" class="space-y-4">
                  <div
                    v-for="solution in solutionList"
                    :key="solution.id"
                    class="p-4 hover:bg-gray-50 rounded-lg transition-colors"
                  >
                    <div class="flex justify-between items-center">
                      <h3 class="font-medium text-gray-900">
                        {{ solution.title }}
                      </h3>
                      <span class="text-gray-500 text-sm">{{
                        solution.createTime
                      }}</span>
                    </div>
                    <p class="text-gray-600 mt-2">{{ solution.description }}</p>
                  </div>
                </div>

                <!-- 讨论 -->
                <div v-if="currentTab === 'discussions'" class="space-y-4">
                  <div
                    v-for="discussion in discussionList"
                    :key="discussion.id"
                    class="p-4 hover:bg-gray-50 rounded-lg transition-colors"
                  >
                    <div class="flex justify-between items-center">
                      <div class="flex items-center gap-2">
                        <a-avatar :size="32" :src="avatarUrl" />
                        <div>
                          <div class="font-medium text-gray-900">
                            {{ discussion.fromNickname }} 
                            <span class="text-gray-500 mx-1">回复</span> 
                            {{ discussion.toNickname }}
                          </div>
                          <div class="text-gray-600 mt-2">{{ discussion.content }}</div>
                        </div>
                      </div>
                      <span class="text-gray-500 text-sm">{{ discussion.createTime }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 收藏/点赞内容 -->
        <UserInteractions
          v-else-if="['likes', 'collections'].includes(currentView)"
          :type="currentView"
          class="bg-white rounded-2xl p-6"
          @close="currentView = 'default'"
        />

        <!-- 编辑资料 -->
        <EditProfile
          v-else-if="currentView === 'edit'"
          class="bg-white rounded-2xl p-6"
          :user-data="userInfo"
          @close="currentView = 'default'"
          @update="handleUserInfoUpdate"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from "vue";
import { topic } from '../../../api/frontend/topic';
import { user } from '../../../api/frontend/user'; // 添加user api导入
import UserInteractions from "../../../components/user/UserInteractions.vue";
import EditProfile from "../../../components/user/EditUserInfo.vue";
import ContributionPlot from "../../../components/user/ContributionPlot.vue";
import { useAuthStore } from "../../../stores/auth.js";

// 修改解题进度数据
const easyProgress = ref({
  solved: 0,
  total: 0,
});

const mediumProgress = ref({
  solved: 0,
  total: 0,
});

const hardProgress = ref({
  solved: 0,
  total: 0,
});

// 获取进度数据
const fetchProgress = async () => {
  try {
    const res = await topic.getProgress(); // 移除参数
    if (res.code === 200 && res.data) {
      easyProgress.value = {
        solved: res.data.simpleCount,
        total: res.data.simpleTotal
      };
      mediumProgress.value = {
        solved: res.data.mediumCount,
        total: res.data.mediumTotal
      };
      hardProgress.value = {
        solved: res.data.hardCount,
        total: res.data.hardTotal
      };
    }
  } catch (error) {
    console.error('获取进度失败:', error);
  }
};

onMounted(() => {
  fetchProgress();
  // 其他onMounted逻辑
});

const leftProgress = ref(0.6); // 60%
const middleProgress = ref(0.4); // 40%
const rightProgress = ref(0.2); // 20%

const leftSolved = ref(30);
const leftTotal = ref(50);
const middleSolved = ref(20);
const middleTotal = ref(50);
const rightSolved = ref(10);
const rightTotal = ref(50);

const solved = computed(
  () => leftSolved.value + middleSolved.value + rightSolved.value
);
const total = computed(
  () => leftTotal.value + middleTotal.value + rightTotal.value
);

// 根据进度返回颜色
const getColorByProgress = (progress) => {
  if (progress >= 0.65) return "#52c41a"; // 绿色
  if (progress >= 0.33) return "#faad14"; // 黄色
  return "#ff4d4f"; // 红色
};

// 修改计算弧长的方法
const getArcLength = (progress, maxLength) =>
  `${progress * maxLength} ${maxLength}`;

const currentView = ref("default"); // 'default', 'likes', 'collections', 'edit'

const switchView = (view) => {
  currentView.value = currentView.value === view ? "default" : view;
};

const authStore = useAuthStore();

// 从用户信息中获取数据
const userInfo = computed(() => authStore.userInfo || {});

// 处理地址和职位信息，如果没有则显示"暂无"
const address = computed(() => userInfo.value?.address || "暂无");
const position = computed(() => userInfo.value?.position || "暂无");

// 计算加入天数
const joinDays = computed(() => {
  if (!userInfo.value?.createTime) return 0;
  const createDate = new Date(userInfo.value.createTime);
  const today = new Date();
  const diffTime = Math.abs(today - createDate);
  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
});

// 用户头像
const avatarUrl = computed(
  () => userInfo.value?.avatar || "default-avatar-url"
);

// 添加贡献数据
const completionData = ref([]);

// 添加加载状态
const contributionLoading = ref(false);

// 优化获取热力图数据的方法
const fetchContributionData = async () => {
  // 如果正在加载中，不重复请求
  if (contributionLoading.value) return;
  
  contributionLoading.value = true;
  try {
    const res = await user.getHeatmapCount(selectedYear.value);
    if (res.code === 200) {
      // 使用 nextTick 确保状态更新完成
      await nextTick();
      // 先清空数据，触发完整的重新渲染
      completionData.value = [];
      await nextTick();
      // 设置新数据
      completionData.value = res.data || [];
      yearlySubmitCount.value = (res.data || []).reduce((sum, item) => sum + item.count, 0);
    }
  } catch (error) {
    console.error('获取热力图数据失败:', error);
    completionData.value = [];
  } finally {
    // 使用 requestAnimationFrame 确保动画帧同步
    requestAnimationFrame(() => {
      setTimeout(() => {
        contributionLoading.value = false;
      }, 300);
    });
  }
};

// 添加年度提交总数
const yearlySubmitCount = ref(0);

// 年份选择相关
const currentYear = new Date().getFullYear();
const selectedYear = ref(currentYear);
const yearOptions = Array.from({ length: 3 }, (_, i) => ({
  value: currentYear - i,
  label: `${currentYear - i}年`,
}));

// 修改年份变化处理方法
const handleYearChange = async (year) => {
  if (year === selectedYear.value) return;
  selectedYear.value = year;
  await fetchContributionData();
};

onMounted(async () => {
  await fetchContributionData(); // 优先获取热力图数据
  await Promise.all([
    fetchProgress(),
    fetchSubmitLogs(),
    fetchReplyLogs(),
    fetchFourData()
  ]);
});

const currentTab = ref("submissions");
const tabs = [
  { key: "submissions", label: "做题记录" },
  // { key: "solutions", label: "题解" },
  { key: "discussions", label: "评论" },
];

// 修改提交记录数据结构
const submissionRecords = ref([]);

// 获取提交记录
const fetchSubmitLogs = async () => {
  try {
    const res = await topic.getSubmitLog();
    if (res.code === 200 && res.data) {
      submissionRecords.value = res.data.map(record => ({
        id: record.id,
        status: record.status === 1 ? 'accepted' : 'wrong',
        problemTitle: record.topicTitle,
        submitTime: record.createTime,
        difficulty: record.difficulty // 0-简单，1-中等，2-困难
      }));
    }
  } catch (error) {
    console.error('获取提交记录失败:', error);
  }
};

// 讨论记录数据
const discussionList = ref([]);

// 获取讨论记录
const fetchReplyLogs = async () => {
  try {
    const res = await topic.getReplyLog();
    if (res.code === 200 && res.data) {
      discussionList.value = res.data;
    }
  } catch (error) {
    console.error('获取讨论记录失败:', error);
  }
};

// 添加四个统计数据
const fourData = ref({
  readNum: 0,
  thumbNum: 0,
  favourNum: 0,
  postNum: 0
});

// 添加数据加载状态
const dataLoading = ref(true);

// 修改获取四个统计数据的方法
const fetchFourData = async () => {
  dataLoading.value = true;
  try {
    const res = await user.getFourData();
    if (res.code === 200) {
      await nextTick();
      fourData.value = res.data;
    }
  } catch (error) {
    console.error('获取统计数据失败:', error);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 300);
  }
};

onMounted(() => {
  fetchFourData();
});

const totalSolved = computed(
  () =>
    easyProgress.value.solved +
    mediumProgress.value.solved +
    hardProgress.value.solved
);

const totalProblems = computed(
  () =>
    easyProgress.value.total +
    mediumProgress.value.total +
    hardProgress.value.total
);

const progressPercentage = computed(() =>
  Math.round((totalSolved.value / totalProblems.value) * 100)
);

// 添加交互数量状态
const interactionCounts = ref({
  likeCount: 0,
  favourCount: 0
});

// 获取点赞收藏数量
const fetchInteractionCounts = async () => {
  try {
    const res = await user.getLikeFavourCount();
    if (res.code === 200) {
      interactionCounts.value = res.data;
    }
  } catch (error) {
    console.error('获取点赞收藏数量失败:', error);
  }
};

onMounted(async () => {
  await fetchContributionData();
  await Promise.all([
    fetchProgress(),
    fetchSubmitLogs(),
    fetchReplyLogs(),
    fetchFourData(),
    fetchInteractionCounts() // 添加到并发请求中
  ]);
});
</script>

<style scoped>
:deep(.ant-tooltip) {
  font-size: 12px;
}

:deep(.ant-select) {
  width: unset !important;
}
</style>
